<template>
  <div class="router-main-view">
    <p class="view-title">Switch组件</p>
    <ComponentsLayout title="基本用法" :code="SwitchBasicCode">
      <SwitchBasic />
    </ComponentsLayout>
    <ComponentsLayout title="disabled示例" :code="SwitchDisabledCode">
      <SwitchDisabled />
    </ComponentsLayout>
    <ComponentsLayout title="自定义颜色示例" :code="SwitchColorCode">
      <SwitchColor />
    </ComponentsLayout>
    <ApiLayout :propData="SwitchProp"></ApiLayout>
  </div>
</template>

<script setup lang="ts">
import SwitchProp from "@/views/props/Switch.prop";
import ComponentsLayout from "../ComponentsLayout.vue";
import ApiLayout from "../ApiLayout.vue";
import SwitchBasic from "./SwitchBasic.vue";
import SwitchBasicCode from "./SwitchBasic.vue?raw";
import SwitchDisabled from "./SwitchDisabled.vue";
import SwitchDisabledCode from "./SwitchDisabled.vue?raw";
import SwitchColor from "./SwitchColor.vue";
import SwitchColorCode from "./SwitchColor.vue?raw";

</script>
<style lang="scss" scoped>
.router-main-view {
  .view-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 3;
  }
}
</style>
